<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <style>
  
*{ margin: 0;padding: 0;}
			#box{  width: 400px;
			       margin: 20px auto;
			       
			       line-height: 60px;
			       color: #fff;
			       border: 5px solid #ababab;
			       border-radius: 15px;
			       position: relative;}
			#box2{ height: 120px;
             overflow: hidden;
           
          }
			h3{ font-size: 26px;
			    background: #FF0000;
			    border-top-left-radius: 10px;
			    border-top-right-radius: 10px;}
			 h3 span{ color: #fff;
			       font-size: 14px;
			       position: absolute;
			       bottom:10px;
			       right: 0;
			       line-height: 24px;}
			ul li a{ text-decoration: none;}
			ul li span{ text-decoration: none;
		                color: #999; float: right;} 
			ul{ margin: 5px auto;
			    width: 300px;
			    } 
			ul li {
			       height:25px ;
			       line-height: 25px;
			       }   
  </style>
  
</head>
<body>
     
            <div id="box">
              <h3>最新消息<span>更多>></span></h3>
              <div id="box2">
                <ul id="con1">
                <li><a href="#">1.11111111111111</a><span>2017-09-08</span></li>
                <li><a href="#">2.22222222222222</a><span>2017-10-02</span></li>
                <li><a href="#">3.33333333333333</a><span>2017-10-08</span></li>
                <li><a href="#">4.44444444444444</a><span>2017-10-09</span></li>
                <li><a href="#">5.55555555555555</a><span>2017-10-10</span></li>
                <li><a href="#">6.66666666666666</a><span>2017-10-11</span></li>
                <li><a href="#">7.77777777777777</a><span>2017-10-16</span></li>
                <li><a href="#">8.88888888888888</a><span>2017-10-18</span></li>
                <li><a href="#">9.99999999999999</a><span>2017-11-12</span></li>
                 </ul>
                
              </div>
            </div>
</body>
</html>
<script src="jquery-3.2.1.min.js"></script>

<script>
 
  var t=null;
  var no1=null;
  $('#con1').clone().appendTo($('#box2'));
  $('#box2').scrollTop(0);
  function auto(){
    t=setInterval(function(){
     
     $('#box2').scrollTop($('#box2').scrollTop()+1);
   
    if( $('#box2').scrollTop() % 25==0){
			clearInterval(t);
			no1=setTimeout(auto,2000);
		}else{
      if($('#box2').scrollTop()>=$('#con1').height()){
        $('#box2').scrollTop(0);
      }
     }
	
    },100)
  }
  auto();
  $('#box2').mouseover(function(){
    clearInterval(t);
    clearTimeout(no1);
})
$('#box2').mouseout(function(){
    auto();
})

</script>